<template>
	<view class="content">
		<view class="head">
			<image src="../../static/headBack.png" mode="aspectFit"></image>
		</view>
		<view class="detail">
			<view class="list">
				<view class="title">
					收费单位
				</view>
				<view class="label">
					临颍县盛宏热力有限公司
				</view>
			</view>
			<view class="list">
				<view class="title">
					选择小区
				</view>
				<view class="label_c">
					<picker mode="selector" :range="list" :range-key="'name'" @change="bindChange">
						<view>{{list[list_index].name}}</view>
					</picker>
				</view>
			</view>
			<view class="list">
				<view class="title">
					缴费户号
				</view>
				<view class="label">
					<input type="text" v-model="value" placeholder="请输入正确的缴费户号" placeholder-class="inpouts" />
				</view>
			</view>
			<button type="primary" @click="submit()">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				list:[{
					id: 2,
					name: '东方锦城'
				}],
				list_index: 0
			}
		},
		onLoad() {
			this.load();
		},
		methods: {
			async load(){
				let res = await this.api.uniRequ(this.api.public.house_community);
				if(res.code == 1){
					this.list = res.data;
				}
			},
			async submit(){
				let res = await this.api.uniRequ(this.api.public.search,{
					number: this.value,
					community_id: this.list[this.list_index].id
					});
				if(res.code == 1){
					this.$framDate.navTo(`index/detail?type=1&com_id=${this.list[this.list_index].id}&detail=${JSON.stringify(res.data)}`)
				}
			},
			bindChange(e){
				this.list_index = e.detail.value;
			}
		}
	}
</script>

<style lang="scss">
	.detail{
		width: 88%;
		padding: 90rpx 3%;
		background-color: #FFFFFF;
		position: relative;
		z-index: 1;
		left: 3%;
		top: -150rpx;
		box-shadow: 0px -5rpx 20rpx rgba(0, 0, 0, 0.1);
		color: #262628;
		.list{
			margin-bottom: 50rpx;
			border-bottom: 1px solid #EFEFF4;
			.title{
				width: 100%;
				height: 52rpx;
				line-height: 52rpx;
				font-size: 26rpx;
				overflow: hidden;
			}
			.label,
			.label_c{
				width: 100%;
				height: 71rpx;
				line-height: 71rpx;
				font-size: 40rpx;
				font-weight: bold;
				overflow: hidden;
				input{
					width: 100%;
					height: 71rpx;
					line-height: 71rpx;
				}
				.inpouts{
					font-weight: 400;
					font-size: 30rpx;
				}
			}
			.label_c{
				height: 51rpx;
				line-height: 51rpx;
				font-size: 32rpx;
				color: #1d1d1d;
			}
		}
		button[type="primary"]{
			background-color: #F65534;
			margin-top: 34rpx;
			height: 93rpx;
			line-height: 93rpx;
			font-size: 33rpx;
		}
	}
</style>
